function DiceRenderer(ctx, offsetX, offsetY)
{
  this.context = ctx;
  this.offX = offsetX;
  this.offY = offsetY;
}
;

DiceRenderer.prototype.render = function(number)
{
  this.context.clearRect(0, 0, 300, 300);
  this.renderBack();
  switch (number)
  {
    case 1:
      this.render1();
      break;
    case 2:
      this.render2();
      break;
    case 3:
      this.render3();
      break;
    case 4:
      this.render4();
      break;
    case 5:
      this.render5();
      break;
    case 6:
      this.render6();
      break;
    default:
  }
};

DiceRenderer.prototype.renderBack = function()
{
  this.context.beginPath();
  this.context.rect(this.offX, this.offY, 200, 200);
  this.context.fillStyle = "red";
  this.context.fill();
};

DiceRenderer.prototype.renderPoint = function(x, y)
{
  this.context.beginPath();
  this.context.arc(this.offX + x, this.offY + y, 25, 0, 2 * Math.PI, false);
  this.context.fillStyle = "white";
  this.context.fill();
};

DiceRenderer.prototype.render1 = function()
{
  this.renderPoint(100, 100);
};
DiceRenderer.prototype.render2 = function()
{
  this.renderPoint(40, 40);
  this.renderPoint(160, 160);
};
DiceRenderer.prototype.render3 = function()
{
  this.render1();
  this.render2();
};
DiceRenderer.prototype.render4 = function()
{
  this.render2();
  this.renderPoint(160, 40);
  this.renderPoint(40, 160);
};
DiceRenderer.prototype.render5 = function()
{
  this.render4();
  this.render1();
};
DiceRenderer.prototype.render6 = function()
{
  this.render4();
  this.renderPoint(40, 100);
  this.renderPoint(160, 100);
};